<template>
  <div>
    <h3>用户列表</h3>
    <x-button
      type="primary"
      @click.native="back"
    >返回</x-button>
    <group class="group">
      <x-input
        title="用户名："
        v-model="data.account"
      ></x-input>
      <x-input
        title="密码："
        v-model="data.password"
      ></x-input>
      <popup-radio
        title="权限："
        :options="roleOptions"
        v-model="data.role"
        :placeholder="placeholder"
      >
        <p
          slot="popup-header"
          class="vux-1px-b popup-slot"
        >请选择用户权限</p>
      </popup-radio>
    </group>

    <x-button
      type="primary"
      @click.native="addUserArea"
    >+添加台区</x-button>


<!--这里开始是弹窗内容-->
    <div v-transfer-dom>
      <popup
        v-model="showPopup"
        height="70%"
        position="bottom"
      >
        <div class="popup1">
          <group class="group">
            <x-input
              title="归属地："
              placeholder="请输入归属地"
              v-model="location"
              @on-enter="search"
            ></x-input>
            <x-input
              title="台区号："
              placeholder="请输入台区号"
              v-model="areaNo"
              @on-enter="search"
            ></x-input>
            <flexbox>
              <flexbox-item>
                <x-button
                  type="primary"
                  @click.native="search"
                >查询</x-button>
              </flexbox-item>
              <flexbox-item>
                <x-button
                  type="primary"
                  @click.native="reset"
                >重置</x-button>
              </flexbox-item>
            </flexbox>
          </group>
          <group>
            <el-table
              ref="multipleTable"
              :data="filterData"
              tooltip-effect="dark"
              style="width: 100%"
              @row-click="rowClick"
              @selection-change='onTableChanged'
              :header-cell-style="tableHeader" 
              :cell-style="tableCell"
            >
              <el-table-column label="归属地">
                <template slot-scope="scope">{{ scope.row.location }}</template>
              </el-table-column>
              <el-table-column
                prop="areaNo"
                label="台区号"
              >
              </el-table-column>
              <el-table-column
                type="selection"
                label="操作"
              >
              </el-table-column>
            </el-table>
          </group>
        </div>
      </popup>
    </div>
<!--弹窗内容结束-->


    <group>
      <x-table v-if="tableData.length != 0">
        <thead>
          <tr class="table-header">
            <th>归属地</th>
            <th>台区号</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in tableData" :key="item.id" class="table">
            <td>{{item.location}}</td>
            <td>{{item.areaNo}}</td>
            <td class="table-set">
              <x-button
                type="warn"
                @click.native="dele(item.areaId)"
              >删除</x-button>
            </td>
          </tr>
        </tbody>
      </x-table>
    </group>

    <x-button
      type="primary"
      @click.native="save"
      style="margin-top:15px;"
    >保存</x-button>

    <toast
      v-model="showSaveSuccess"
      type="success"
      text="保存成功"
    ></toast>
    <toast
      v-model="showSaveCancel"
      type="cancel"
      text="保存失败"
    ></toast>
    <toast
      v-model="showToast"
      type="cancel"
      :text="showToastMsg"
    ></toast>
    <loading :show="showLoading" text="加载中..."></loading>

    <!-- <toast v-model="showDeleSuccess" type="success" text="删除成功"></toast>
    <toast v-model="showDeleCancel" type="cancel" text="删除失败，请再试。"></toast> -->
  </div>
</template>

<script>
import {
  Group,
  XButton,
  XTable,
  PopupRadio,
  XInput,
  Toast,
  Popup,
  Flexbox,
  TransferDom,
  FlexboxItem, Loading
} from "vux";
import Http from "./../unit/http.js";

export default {
  directives: {
    TransferDom
  },
  components: {
    Group,
    XButton,
    XTable,
    PopupRadio,
    XInput,
    Toast,
    Popup,
    Flexbox,
    FlexboxItem, Loading
  },
  data() {
    return {
      id: 0,
      placeholder: "",
      location: "",
      areaNo: "",
      multipleSelection: [],
      roleOptions: [
        {
          key: 2,
          value: "普通用户"
        },
        {
          key: 1,
          value: "管理员"
        }
      ],

      data: {
        account: "",
        password: "",
        role: 2
      },
      tableData: [],
      filterData: [],
      ids:"",

      showPopup: false,
      showSaveSuccess: false,
      showSaveCancel: false,
      showToast:false,
      showToastMsg:"",
      showLoading:false
      // showDeleSuccess:false,
      // showDeleCancel:false,
    };
  },

  mounted() {
    this.getId();
    this.getFilterData(this.location, this.areaNo);
  },

  computed:{
    theData(){
      const { tableData, filterData } = this
      return {
        tableData,
        filterData
      }
    }
  },

  watch:{
    theData:function(){
      this.showLoading = false
    }
  },

  methods: {
    getId() {
      this.id = this.$route.query.id;
      if (this.id) {
        this.getdata(this.id);
        this.getTableData(this.id);
      } else {
        this.whatPlaceholder();
      }
    },

    getdata(id) {
      const self = this;
      const param = { userId: id };
      const url = "/yitai/admin/user/userInfo";
      const success = function(response) {
        
        self.data = response.data.info;
        self.whatPlaceholder();
      };
      const failed = function() {
        
      };
      Http.http(url, param, success, failed);
    },

    getTableData(id) {
      this.showLoading = true;
      const self = this;
      const param = { userId: id };
      const url = "/yitai/admin/user/userAreas";
      const success = function(response) {
       
        // self.tableData = response.data.info;
        const info = response.data.info
        for(let i = 0 ; i < info.length;  i++){
          info[i].fixed = true
        }
        self.tableData = info
      }
      const failed = function() {
        
      };
      Http.http(url, param, success, failed);
    },

    getFilterData(location, areaNo) {
      this.showLoading = true;
      const self = this;
      const param = { location: location, areaNo: areaNo };
      const url = "/yitai/admin/area";
      const success = function(response) {
        
        // self.filterData = response.data.info;
        const info = response.data.info
        for(let i = 0 ; i < info.length;  i++){
          info[i].fixed = false
        }
        self.filterData = info
      };
      const failed = function() {
        
      };
      Http.http(url, param, success, failed);

      // const table = this.tableData;
      // const filter = this.filterData;
      // const tableArray = [];
      // for(let i = 0 ; i < table.length ; i++){
      //     tableArray.push(table[i].areaId)
      // }
      // for(let j = 0 ; j < filter.length; j++){
      //     const filterId = filter[j].id
      //     if(tableArray.includes(filterId)){
      //       const row = filter[j]
      //       this.$refs.multipleTable.toggleRowSelection(row,true);
      //     }
      //  } 
    },

    reset() {
      this.location = "";
      this.areaNo = "";
      this.getFilterData(this.location, this.areaNo);
    },

    search() {
      this.getFilterData(this.location, this.areaNo);
    },

    //用户权限占位
    whatPlaceholder() {
      this.data.role == 1
        ? (this.placeholder = "管理员")
        : (this.placeholder = "普通用户");
    },

    back() {
      this.$router.go(-1);
    },

    addUserArea() {
      this.showPopup = true;
      const table = this.tableData;
      const filter = this.filterData;
      const tableArray = [];
      for(let i = 0 ; i < table.length ; i++){
          tableArray.push(table[i].areaId)
      }
      for(let j = 0 ; j < filter.length; j++){
          const filterId = filter[j].id
          if(tableArray.includes(filterId)){
            const row = filter[j]
            this.$refs.multipleTable.toggleRowSelection(row,true);
          }
       } 
    },

    onTableChanged(selection){
      const tableArray = []
      for(let i = 0 ; i < this.tableData.length; i++){
        if(this.tableData[i].fixed == true){
          tableArray.push(this.tableData[i])
        }
      }
      this.tableData = tableArray;

      const idArray = [];
      for(let i = 0 ; i < this.tableData.length; i++){
        const areaId = this.tableData[i].areaId
        idArray.push(areaId)
      }    

      for (let idx=0;idx<selection.length;idx++){
        const selectionId = selection[idx].id
        if( !idArray.includes(selectionId) ){
          const row = selection[idx]
          const rowObj = {areaId:row.id, address:row.address, areaNo:row.areaNo, location:row.location ,fixed:false }
          this.tableData.push(rowObj)
        }
      }


      
    },

    rowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    
    dele(areaId)  {

      for(let item in this.tableData){ 

        if(this.tableData[item].areaId == areaId){

          if(this.tableData[item].fixed == true){
            const id = this.tableData[item].id
            const self = this;
            const param = { id: id, userId:self.id };
            const url = "/yitai/admin/user/removeArea";
            const success = function(response) {
             
              if(response.data.status==200){
                self.tableData.splice(item,1)
                // self.getTableData(self.id);
              }
              // self.showDeleSuccess = true;
              
            };
            const failed = function() {
              
              // self.showDeleCancel = true;
            };
            Http.http(url, param, success, failed);     
          }else{
            this.tableData.splice(item,1)
          }

        }
      };
      for(let item in this.filterData){
        if(this.filterData[item].id == areaId){
          const row = this.filterData[item]
          this.$refs.multipleTable.toggleRowSelection(row);
        }
      }
    },

    save() {
      const self = this;
      let ids = "";
      for(let i = 0;i<self.tableData.length;i++){
        if(self.tableData[i].fixed == false){
          ids = ids + self.tableData[i].areaId + ";";
        } 
      }
      const param = {
        id:self.id,
        account: self.data.account,
        password: self.data.password,
        ids: ids,
        role: self.data.role
      };
     
      if(!param.account){
        self.showToast = true;
        self.showToastMsg = "用户名不能为空"
      }else if(!param.password){
        self.showToast = true;
        self.showToastMsg = "密码不能为空"
      }else if(param.ids=="" && self.tableData.length == 0){
        self.showToast = true;
        self.showToastMsg = "请添加台区"
      }else{
      
        const url = "/yitai/admin/user/submit";
        const success = function(response) {
          
          const status = response.data.status
          if(status == 200){
            self.showSaveSuccess = true;
            self.back();
          }else if(status == 204){
            self.showToastMsg = response.data.msg
            self.showToast = true
          }
      };
      const failed = function() {
        
        self.showSaveCancel = true;
      };
      Http.http(url, param, success, failed);
      }
      
    },




    //elementui的表格样式
    tableHeader({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "color: #242424;text-align:center;font-size:18px;";
      }
    },
    tableCell({ row, column, rowIndex, columnIndex }) {
      return "text-align:center;color: #242424;font-size:18px;";
    }
  }
};
</script>





<style scoped >
h3 {
  margin-bottom: 20px;
}

button.weui-btn {
  font-size: 18px;
}
.weui-btn_primary {
  background-color: #005e9c;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
  color: rgba(255, 255, 255, 0.6);
  background-color: #034b7a;
}
.weui-btn_disabled.weui-btn_primary {
  background-color: #3978a1;
}

.group .weui-cells .weui-cell,
.group .weui-cells .vux-calendar {
  font-size: 18px ;
}

.table-header th {
  font-weight: bold;
  font-size: 18px;
}
.table {
  font-size: 18px;
}
.table td {
  padding: 6px 1px;
  text-align: center;
  line-height: 30px;
}

.table-set {
  display: flex;
}
.table-set button.weui-btn {
  font-size: 18px;
  margin: 6px 4px;
}

.vux-table:after {
  border-top: 1px solid #888888;
}
.vux-table td:before,
.vux-table th:before {
  border-bottom: 1px solid #888888;
}
.vux-table td:after,
.vux-table th:after {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 1px solid #888888;
  color: #c7c7c7;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}

.popup-slot {
  font-size: 18px;
  text-align: center;
  padding: 8px 0;
  color: #888;
}

.popup1 {
  width: 100%;
  height: 100%;
}
</style>